<template>
	<view class="w100 tr upload_container">

		<view class="fenlei_title">
			<view class="fenlei_h"><b>*</b>试题分类：</view>
			<view class="fenlei_is_css" @click="acti_click1">{{fenlei_is1?fenlei_is1:'请选择试题分类'}}</view>
			<w-picker mode="selector" :default-props="activity_type" default-type="name"
				@confirm="onTypeConfirm1($event)" ref="activity_is1" :options="worktype"></w-picker>
		</view>

		<view class="fenlei_title">
			<view class="fenlei_h"><b>*</b>课程/分类：</view>
			<view class="fenlei_is_css" @click="acti_click2">{{fenlei_is2?fenlei_is2:'请选择课程'}}</view>
			<w-picker mode="selector" :default-props="activity_type" default-type="name"
				@confirm="onTypeConfirm2($event)" ref="activity_is2" :options="kc_list"></w-picker>
		</view>
		<view class="fenlei_title">
			<view class="fenlei_h"><b>*</b>章节/名称：</view>
			<view class="fenlei_is_css" @click="acti_click3">{{fenlei_is3?fenlei_is3:'请选择章节'}}</view>
			<w-picker mode="selector" :default-props="activity_type" default-type="name"
				@confirm="onTypeConfirm3($event)" ref="activity_is3" :options="mindType_list"></w-picker>
		</view>

		<view class="fenlei_title" v-if="second_level">
			<view class="fenlei_h"><b>*</b>章节：</view>
			<view class="fenlei_is_css" @click="acti_click4">{{fenlei_is4?fenlei_is4:'请选择节'}}</view>
			<w-picker mode="selector" :default-props="activity_type" default-type="name"
				@confirm="onTypeConfirm4($event)" ref="activity_is4" :options="second_list"></w-picker>
		</view>

		<view class="fenlei_title" v-if="third_level">
			<view class="fenlei_h"><b>*</b>小节：</view>
			<view class="fenlei_is_css" @click="acti_click5">{{fenlei_is5?fenlei_is5:'请选择小节'}}</view>
			<w-picker mode="selector" :default-props="activity_type" default-type="name"
				@confirm="onTypeConfirm5($event)" ref="activity_is5" :options="third_list"></w-picker>
		</view>

		<view class="w100 exam-container">
			<view class="exam-list">
				<view class="exam-item" v-for="(item, indexsed) in exam_list" :key="index">
					<view class="w100">
						<view class="timu_css_sed">
							<view class="timu_css">{{ indexsed + 1 }}. 题目: </view>
							<input type="text" placeholder="请输入题目" v-model="item.title" />
						</view>
						<view class="" style="margin: 10px 0;">
							<label class="radio_css">
								<radio value="1" :checked="1 == current" @click="radio_change(1)" />单选题
							</label>
							<label class="radio_css">
								<radio value="2" :checked="2 == current" @click="radio_change(2)" />多选题
							</label>
							<label class="radio_css">
								<radio value="3" :checked="3 == current" @click="radio_change(3)" />判断题
							</label>
						</view>
					</view>
					<view class="exam-item-title" v-if="item.type == 1 || item.type == 2">选项:</view>
					<view class="exam-item-options" v-if="item.type == 1 || item.type == 2">

						<view style="flex: 1">
							<view v-if="item.type == 1">
								<view class="exam-item-option" v-for="(option, index) in item.choose" :key="index">
									<view style="text-align: center;width: 50px;">{{ xuanxiang[index] }}:</view>
									<input placeholder="请输入选项内容" class="xuanze_css" v-model="option.value" />
								</view>
							</view>
							<view v-else-if="item.type == 2">
								<view class="exam-item-option" v-for="(option, index) in duanxiangti.choose" :key="index">
									<view style="text-align: center;width: 50px;">{{ xuanxiang[index] }}:</view>
									<input placeholder="请输入选项内容" class="xuanze_css" v-model="option.value" />
								</view>
							</view>
						</view>
					</view>
					<view class="exam-item-title">答案:</view>
					<view class="exam-item-answers">
						<view style="display: flex; align-items: center;padding-top: 10px;">
							<label class="radio_css" v-for="(option, index) in item.choose" :key="index" v-if="item.type == 1">
								<radio :value="index" :checked="index == currentsed" @click="radio_changesed(indexsed,index)" />{{ xuanxiang[index] }}
							</label>

							<view v-if="item.type == 2">
								
								<checkbox-group v-model="duanxiangti.answer">
									<label v-for="(option, index) in duanxiangti.choose" :key="index">
										<checkbox :value="index" :checked="option.checked" @click="duoxuan(index)"/>{{ xuanxiang[index] }}
									</label>
								</checkbox-group>
							</view>

							<view class="exam-radio-group" v-model="item.answer[0]" v-if="item.type == 3">
								<label class="radio_css">
									<radio value="1" :checked="1 == currentsedxx" @click="radio_changesedxx(indexsed,1)" />√
								</label>
								<label class="radio_css">
								<radio value="2" :checked="2 == currentsedxx" @click="radio_changesedxx(indexsed,2)" />×
								</label>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view>
			<view @click="uploadExamQuestion" class="shangchuan_css" type="primary">上传</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 1,
				currentsed: -1,
				currentsedxx: -1,
				fenlei_is1: '',
				fenlei_is2: '',
				fenlei_is3: '',
				fenlei_is4: '',
				fenlei_is5: '',
				activity_type: {
					"label": "name",
					"value": "id"
				},
				kc_list: [],
				mindClazzId: "",
				vrId: "",
				voviId: "",
				selectedworkid: "",
				second_level: false,
				third_level: false,
				second_list: [],
				secondChapter: "",
				firstChapter: "",
				chapter_list: [],
				thirdChapter: "",
				third_list: [],
				form: {},
				xuanxiang: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
				exam_list: [{
					title: "",
					type: "1",
					choose: [{
							value: ""
						},
						{
							value: ""
						},
						{
							value: ""
						},
						{
							value: ""
						},
					],
					answer: []
				}],

				danxuanti: {
					title: "",
					type: "1",
					choose: [{
							value: "",
							checked:false,
						},
						{
							value: "",
							checked:false,
						},
						{
							value: "",
							checked:false,
						},
						{
							value: "",
							checked:false,
						},
					],
					answer: []
				},
				duanxiangti: {
					title: "",
					type: "2",
					choose: [{
							value: "",
							checked:false,
						},
						{
							value: "",
							checked:false,
						},
						{
							value: "",
							checked:false,
						},
						{
							value: "",
							checked:false,
						},
						{
							value: "",
							checked:false,
						},
						{
							value: "",
							checked:false,
						},
					],
					answer: []
				},

				exam_item: {
					title: "",
					type: "1",
					choose: [{
							value: "1"
						},
						{
							value: "1"
						},
						{
							value: "1"
						},
						{
							value: "1"
						},
					],
					answer: []
				},

				stype: "kc",
				mindTypeId: "",
				mindType_list: [],
				mindId: "",
				cate_inner_list: [],
				worktype: [{
					id: 0,
					name: '思政课程试题',
				}, {
					id: 1,
					name: '精神谱系试题',
				}, {
					id: 2,
					name: '全景思政试题',
				}, {
					id: 3,
					name: 'VR仿真试题',
				}]
			};
		},
		created() {
			this.getMindClazzList();
		},
		methods: {
			acti_click1() {
				this.$refs.activity_is1.show();
			},
			onTypeConfirm1(val) {
				this.fenlei_is1 = val.result
				if (val.value == 0) {
					this.stype = 'kc'
					this.kc_list = []
					this.second_level = false;
					this.second_list = [];
					this.chapter_list = [];
					this.third_list = [];
					this.third_level = false;
					this.getMindClazzList();

				} else if (val.value == 1) {
					this.stype = 'ca'
					this.kc_list = []
					this.getmind()
				} else if (val.value == 2) {
					this.stype = 'qa'
					this.quanjing()
					this.kc_list = []
				} else if (val.value == 3) {
					this.stype = 'vr'
					this.vr_list()
					this.kc_list = []

				}
				// this.type_name = val.value
			},
			acti_click2() {
				this.$refs.activity_is2.show();
			},
			//课程
			onTypeConfirm2(val) {
				this.fenlei_is2 = val.result
				if (this.stype == 'kc') {
					this.mindClazzId = val.value
					this.second_list = []
					this.handleChange()
				} else if (this.stype == 'ca') {
					this.second_list = []
					this.mindTypeId = val.value
					this.getMindByType()
				} else if (this.stype == 'qa') {
					this.voviId = val.value
					this.second_list = []
					this.quanjing_list(val.value)
				} else if (this.stype == 'vr') {
					this.vrId = val.value
					this.second_list = []
					this.vr_list_li(val.value)
				}

				// this.type_name = val.value
			},
			acti_click3() {
				this.$refs.activity_is3.show();

			},
			onTypeConfirm3(val) {
				this.fenlei_is3 = val.result
				if (this.stype == 'kc') {
					this.secondChapter = val.value
					this.chapterChange(val.value)
				} else if (this.stype == 'ca') {
					this.mindId = val.value
					this.mindIdHandleChange()
				} else if (this.stype == 'qa') {
					this.getVoviDetail(val.value)
				} else if (this.stype == 'vr') {
					this.getVrDetail(val.value)
				}

				// this.type_name = val.value
			},
			acti_click4() {
				this.$refs.activity_is4.show();
			},
			onTypeConfirm4(val) {
				this.fenlei_is4 = val.result
				// this.type_name = val.value
			},
			acti_click5() {
				this.$refs.activity_is5.show();
			},
			onTypeConfirm5(val) {
				this.fenlei_is5 = val.result
				// this.type_name = val.value
			},
			//vr
			vr_list() {
				this.pyReq(this.$http.getVrTypeInfo, {}, (res) => {
					if (res.code == 0) {
						if (res.result && res.result.length !== 0) {
							res.result.forEach((item, index) => {
								this.kc_list.push({
									'name': item.name,
									'id': item.id,
								})
							});
						}
					}
				});
			},
			//vr
			vr_list_li(vrid) {
				let id = vrid
				let pageNo = 1
				let pageSize = 99999

				this.pyReq(this.$http.getVRListByType, {
					id,
					pageNo,
					pageSize
				}, (res) => {
					if (res.code == 0) {
						if (res.result && res.result.length !== 0) {
							console.log('[]', res.result)
							res.result.forEach((item, index) => {
								this.mindType_list.push({
									'name': item.name,
									'id': item.id,
								})
							});
						}
					}
				});
			},
			getVrDetail(vrId) {
				var that = this
				that.pyReq(that.$http.getVrDetail, {
					vrId: vrId
				}, function(res) {
					if (!res.result.testPreview) {
						res.result.testPreview = 0
					} else {
						res.result.testPreview.map((item, index) => {
							item['checked'] = false
							item['type'] = item['testType']
						})
					}
					that.exam_list = res.result.testPreview
				});
			},
			//全景思政
			quanjing() {
				this.pyReq(this.$http.getVoviTypeInfo, {}, (res) => {
					if (res.code == 0) {
						if (res.result && res.result.length !== 0) {
							res.result.forEach((item, index) => {
								this.kc_list.push({
									'name': item.name,
									'id': item.id,
								})
							});
						}
					}
				});
			},
			quanjing_list(vid) {
				let id = vid
				this.pyReq(this.$http.getVoviByType, {
					id
				}, (res) => {
					if (res.code == 0) {
						if (res.result && res.result.length !== 0) {
							res.result.forEach((item, index) => {
								this.mindType_list.push({
									'name': item.name,
									'id': item.id,
								})
							});
						}
					}
				});
			},
			getVoviDetail(voviId) {
				var that = this
				that.pyReq(that.$http.getVoviDetail, {
					voviId: voviId
				}, function(res) {
					console.log('that.content', res.result)
					if (res.result.testPreview) {
						res.result.testPreview.map((item, index) => {
							item['checked'] = false
							item['type'] = item['testType']
						})
					} else {
						res.result.testPreview = 0
					}
					that.exam_list = res.result.testPreview
				});
			},
			typeChange() {
				this.exam_list = [{
					title: "",
					type: "1",
					choose: [{
							value: ""
						},
						{
							value: ""
						},
						{
							value: ""
						},
						{
							value: ""
						},
					],
					answer: []
				}];
			},
			mindIdHandleChange() {

			},
			getMindByType() {
				this.mindId = "";
				const {
					mindTypeId
				} = this;
				if (!mindTypeId) return;
				this.pyReq(this.$http.getMindByType, {
					mindTypeId,
					pageNo: 1,
					pageSize: 9999
				}, (res) => {
					if (res.code == 0) {
						if (res.result && res.result.records.length !== 0) {
							this.cate_inner_list = res.result.records;
						}
					}
				});
			},
			getMindClazzList() {
				this.pyReq(this.$http.getMindClazzListSecond, {}, (res) => {
					if (res.code == 0) {
						if (res.result && res.result.length !== 0) {
							res.result.forEach((item, index) => {
								this.kc_list.push({
									'name': item.mindClazzName,
									'id': item.mindClazzId,
								})
							});
						}
					}
				});

			},
			getmind() {
				this.pyReq(this.$http.getMindType, {
					pageNo: 1,
					pageSize: 9999
				}, (res) => {
					if (res.code == 0) {
						if (res.result && res.result.records.length !== 0) {
							res.result.records.forEach((item, index) => {
								this.kc_list.push({
									'name': item.mindTypeName,
									'id': item.mindTypeId,
								})
							});
						}
					}
				});
			},
			appendExamList() {
				let item = JSON.parse(JSON.stringify(this.exam_item));
				this.exam_list.push(item);
			},
			deleteExamItem(index) {
				this.exam_list.splice(index, 1);
			},

			commitTestByClass() {
				const {
					thirdChapter,
					secondChapter,
					firstChapter,
					mindTypeId,
					mindId,
					vrId,
					voviId
				} = this;
				const {
					type,
					title,
				} = this.exam_list[0];
				var choose;
				var answer;
				if (type == 1 || type == 3) {
					choose = this.exam_list[0].choose;
					answer = this.exam_list[0].answer;
				} else if (type == 2) {
					choose = this.duanxiangti.choose;
					answer = this.duanxiangti.answer;
				}
				if (this.stype == "kc") {
					if (!(thirdChapter || secondChapter || firstChapter)) {
						return uni.showToast({
							title:"请选择课程, 章节后再试",
						})
					}
				}
				if (this.stype == "ca") {
					if (!(mindTypeId || mindId)) {
						return uni.showToast({
							title:"请选择章节/分类后再试",
						})
					}
				}
				if (!title) {
					return uni.showToast({
						title:"请输入题目",
					})
				}
				if (type == 1 || type == 2) {
					if (!choose.every(item => item.value !== '')) {
						return uni.showToast({
							title:"请输入选项内容",
						})
					}
				}
				if (answer.length == 0) {
					return uni.showToast({
						title:"请选择答案",
					})
				}
				if(this.stype == "kc"){
					var chapterId =  thirdChapter || secondChapter || firstChapter
					this.pyReq(
						this.$http.commitTestByClass, {
							chapterId,
							type,
							title,
							choose: choose.map(item => "##" + item.value).join("") + "##",
							answer: answer.map(item => "##" + item).join("") + "##",
						},
						(res) => {
							if (res.code == 0) {
								this.exam_list = [{
									title: "",
									type: "1",
									choose: [{
											value: ""
										},
										{
											value: ""
										},
										{
											value: ""
										},
										{
											value: ""
										},
									],
									answer: []
								}];
							}
						}
					);
				}else if(this.stype == "ca"){
					this.pyReq(
						this.$http.commitTestByMind, {
							mindId,
							type,
							title,
							choose: choose.map(item => "##" + item.value).join("") + "##",
							answer: answer.map(item => "##" + item).join("") + "##",
						},
						(res) => {
							if (res.code == 0) {
								this.exam_list = [{
									title: "",
									type: "1",
									choose: [{
											value: ""
										},
										{
											value: ""
										},
										{
											value: ""
										},
										{
											value: ""
										},
									],
									answer: []
								}];
							}
						}
					);
				}else if(this.stype == "qa"){
					this.pyReq(
						this.$http.commitTestByVovi, {
							voviId,
							type,
							title,
							choose: choose.map(item => "##" + item.value).join("") + "##",
							answer: answer.map(item => "##" + item).join("") + "##",
						},
						(res) => {
							if (res.code == 0) {
								this.exam_list = [{
									title: "",
									type: "1",
									choose: [{
											value: ""
										},
										{
											value: ""
										},
										{
											value: ""
										},
										{
											value: ""
										},
									],
									answer: []
								}];
							}
						}
					);
				}else if(this.stype == "vr"){
					this.pyReq(
						this.$http.commitTestByVr, {
							vrId,
							type,
							title,
							choose: choose.map(item => "##" + item.value).join("") + "##",
							answer: answer.map(item => "##" + item).join("") + "##",
						},
						(res) => {
							if (res.code == 0) {
								this.exam_list = [{
									title: "",
									type: "1",
									choose: [{
											value: ""
										},
										{
											value: ""
										},
										{
											value: ""
										},
										{
											value: ""
										},
									],
									answer: []
								}];
							}
						}
					);
				}
				
			},
			// 上传
			uploadExamQuestion() {
				this.commitTestByClass();
			},

			handleChange() {
				this.firstChapter = "";
				this.second_level = false;
				this.secondChapter = "";
				this.firstChapter = "";
				this.chapter_list = [];
				this.third_level = false;
				this.thirdChapter = "";
				this.getFirstChapter();
			},
			chapterChange(chapterId) {
				this.second_level = false;
				this.third_level = false;
				this.pyReq(this.$http.getChildChapter, {
					chapterId
				}, (res) => {
					res.result.forEach((item, index) => {
						this.second_list.push({
							'name': item.chapterName,
							'id': item.id,
							'isEnd': item.isEnd,
						})
					});
				});
			},
			getFirstChapter() {
				this.mindType_list = []
				const {
					mindClazzId
				} = this;
				if (!mindClazzId && mindClazzId != 0) return;
				this.pyReq(this.$http.getFirstChapter, {
					mindClazzId
				}, (res) => {
					res.result.forEach((item, index) => {
						this.mindType_list.push({
							'name': item.chapterName,
							'id': item.chapterId,
							'isEnd': item.isEnd,
						})
					});
				});
			},

			secondChapterChange(chapterId) {
				this.third_level = false;
				this.third_list = [];
				this.thirdChapter = "";

				const arr = this.second_list.filter(item => item.id == chapterId);
				if (arr.length != 0 && arr[0].isEnd == 0) {
					this.third_level = true;
				} else if (arr.length != 0 && arr[0].isEnd == 1) {
					return (this.third_level = false);
				}

				this.pyReq(this.$http.getChildChapter, {
					chapterId
				}, (res) => {
					this.third_list = res.result;
				});
			},
			radio_change(index) {
				this.current = index
				this.exam_list[0].type = index
			},
			radio_changesed(indexsed,index) {
				this.currentsed = index
				this.exam_list[indexsed].answer[0] = index
			},
			radio_changesedxx(indexsed,index) {
				this.currentsedxx = index
				this.exam_list[indexsed].answer[0] = index
			},
			duoxuan(index){
				if(this.duanxiangti.choose[index].checked){
					this.duanxiangti.choose[index].checked = false
				}else{
					this.duanxiangti.choose[index].checked = true
				}
				this.duanxiangti.choose.forEach((item, index) => {
					if(item.checked){
						this.duanxiangti.answer.push(index)
					}
					
				});
			}

		}
	};
</script>

<style lang="scss">
	.shangchuan_css{
		background-color: rgb(166, 14, 10); 
		margin: 10px auto;
		width: 100px;
		border-radius: 7px;
		color: #fff;
		line-height: 30px;
		text-align: center;
		font-size: 15px;
	}
	.xuanze_css{
		width: auto;flex: 1;border: 1px solid #ddd;padding-left: 5px;
		height: 30px;
	}
	.radio_css {
		margin: 10px;
	}

	/deep/.uni-radio-input-checked {
		color: #B31610;
		background-color: #B31610 !important;
		border-color: #B31610 !important;
	}

	/deep/.uni-radio-input-checked::before {
		background-color: #B31610;
		color: #B31610;
	}

	.timu_css {
		line-height: 30px;
		font-size: 15px;
	}

	.timu_css_sed {
		display: flex;
		justify-content: space-between;
	}

	.timu_css_sed input {
		border: 1px solid #ddd;
		border-radius: 7px;
		width: 80%;
		padding-left: 5px;
		height: 30px;
	}

	.fenlei_title {
		padding: 0 5px;
		display: flex;
		justify-content: space-between;
	}

	.fenlei_h {
		font-size: 15px;
		line-height: 25px;
		margin-top: 5px;

	}

	.fenlei_h b {
		color: #B31610;
	}

	.fenlei_is_css {
		overflow: hidden;
		width: 70%;
		line-height: 25px;
		border: 1px solid #ddd;
		border-radius: 7px;
		padding-left: 5px;
		margin-top: 5px;
		height: 27px;
	}

	.exam-container {
		border: 1px solid #eee;
		border-radius: 10px;
		padding: 5px;
		width: 90%;
		margin: 5px auto;
	}

	.exam-list {
		text-align: left;
	}

	.exam-item {
		margin-bottom: 30px;


	}

	.exam-item-options,
	.exam-item-answers {
		display: flex;
		align-items: center;
	}

	.exam-item-answers {
		margin-top: 10px;
	}

	.exam-item-option {
		flex: 1;
		display: flex;
		align-items: center;
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.exam-item-title {
		font-weight: bolder;
		font-size: 16px;
	}

	.exam-checkbox-group {
		display: flex;
		align-items: center;
	}

	.exam-checkbox {
		margin-right: 30px;
		width: 50px;


	}

	.el-checkbox__label {
		padding: 0;
	}

	.exam-radio-group {
		margin-left: -10px;
		display: flex;
		align-items: center;
	}

	.exam-radio {
		margin-right: 30px;
		width: 50px;
	}
</style>
